import { domTree } from '../../../../../element/domTree';

const dragList_whiteSapce_dataManaTag = 'dragList_whiteSapce_dataMana';

const whiteSpaceDiv_animaClass = 'spaceWhite_anima';

const whiteSpaceDiv_defaultClass = 'widthaaa';

const whiteSpaceDiv_attri_spaceActive = 'spaceactive';

class dragList_whiteSapce_dataMana {
  get [Symbol.toStringTag]() {
    return dragList_whiteSapce_dataManaTag;
  }

  constructor() {}

  /**
   * 已装载的 空白元素
   * @type {HTMLElement[]}
   */
  whiteSpaceDivArr = [];

  /**
   * 当前 选中的 空白元素
   * @type {HTMLElement}
   */
  cur_white_El;

  /**
   * 上一个 空白元素
   * @type {HTMLElement}
   */
  last_white_El;

  /**
   * 设置 新的 whiteSpace El 为 active
   * 应用 动画
   */
  setNewActive_whiteEl(newSpaceEl) {
    this.lastDiv = this.curDiv;

    this.curDiv = newSpaceEl;

    this.setSpaceDiv_active(this.lastDiv, false);

    // 过渡动画 好像 不能 直接 添加 渲染帧率
    this.setSpaceDiv_active(this.curDiv, false);

    // 渲染帧 就行了
    requestAnimationFrame(() => {
      this.setSpaceDiv_active(this.curDiv, true);
    });
  }

  /**
   *  更改 spacewhitediv 的 spaceactive
   * @param {HTMLElement} spaceEl 指定 选择 更改的 spacewhitediv
   * @param {boolean} bool
   */
  setSpaceDiv_active(spaceEl, bool = false) {
    spaceEl?.setAttribute(whiteSpaceDiv_attri_spaceActive, `${bool}`);
  }

  /**
   * 判断 当前元素 是否 是 whiteSpace 元素
   * @param {HTMLElement | null} element
   * @returns {boolean}
   */
  isWhiteSpaceEl(element) {
    return element?.classList.contains(whiteSpaceDiv_defaultClass);
  }

  /**
   * 创建 一个 空白元素
   * @param {string} id 空白元素 id
   * @returns {HTMLElement}
   */
  createWhiteSpace() {
    let ret;

    ret = domTree(new domtEmpty());

    this.whiteSpaceDivArr.push(ret);

    return ret;
  }

  /**
   * 移除 所有 空白元素
   */
  removeAll_spaceWhiteDiv() {
    for (let curEl of this.whiteSpaceDivArr) {
      curEl.remove();
    }
  }
}

function domtEmpty() {
  return {
    tag: 'div',
    class: [whiteSpaceDiv_animaClass, whiteSpaceDiv_defaultClass],
  };
}

export { dragList_whiteSapce_dataMana };
